<template>
  <div >
    <el-backtop :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >
        Up
      </div>
    </el-backtop>
<!--    顶部区域-->
<!--    <div class="sn">-->
<!--      <p class="sn-login-info">-->
<!--        <em @click="toIndex">回到商城首页</em>-->
<!--        <a  class="sn-login">您已登录</a>-->
<!--      </p>-->
<!--  </div>-->
    <top-bar></top-bar>
    <!--icon和搜索区域-->
<!--    <div class="shopicon">-->
<!--      <img src="../../assets/imgs/favicon1.png" alt="">-->
<!--    </div>-->
<!--    <div class="search">-->
<!--      <label>-->
<!--        <input class="search-input" type="text"/><button class="search-button" type="submit">搜索</button>-->
<!--      </label>-->
<!--    </div>-->
<!--    分隔卡片区域-->
    <div class="card">
      <div class="card1">商品详情页</div>
      <div class="index" @click="toIndex">首页</div>
    </div>
<!--    分隔线区域-->
    <div class="line"></div>
<!--    商品详细信息页-->
    <div class="goods">
    <div class="img">
      <div class="img_big">
      <img :src="goodInfo.pics[bigImgIndex].pics_big_url" alt="">
      </div>
      <div class="img_small">
        <div class="img_small_index">
          <img v-for="(item ,i ) in goodInfo.pics" :src="item.pics_big_url" alt="" :key="i" @mouseenter="changeBigImg(i)" >
        </div>
      </div>
    </div>
<!--      右侧信息模块-->
      <div class="choice">
        <div class="name">
          <h3>{{goodInfo.goods_name}}</h3>
        </div>
        <div class="price">价格：
          <span>{{goodInfo.goods_price | finalPrice}}</span>
        </div>
        <div class="weight">重量
          <span>{{goodInfo.goods_weight}}</span>
          <span class="span3">  g</span>
        </div>
        <div class="attr" v-for="(item ,i) in goodInfo.attrs" :key="i">
          <span class="attr_name">{{item.attr_name}}</span>
          <span class="attr_vals">{{item.attr_vals}}</span>
        </div>
        <div class="count">数量
          <div class="counter">
            <label>
              <input type="text" v-model="buyInfo.goods_count">
            </label>
            <div class="btn">
              <button @click="add" style="font-size: 16px;text-align: center">+</button>
              <button @click="sub" style="font-size: 16px;text-align: center" :class="[buyInfo.goods_count <= 0 ? 'notable' : '']">-</button>
            </div>
          </div>
        </div>
        <div class="sub_button">
          <button @click="toCart" :disabled="buyInfo.goods_count===0" :class="[buyInfo.goods_count <= 0 ? 'notable' : '']">加入购物车</button>
        </div>
        <div class="tran_info">
          配送范围
          <span>    送货范围仅限安庆、宿州、宣城、蚌埠、淮南、六安、马鞍山、滁州、亳州、淮北、黄山、池州、阜阳、合肥、铜陵、芜湖地区(生鲜类别仅限部分地区)</span>
        </div>
      </div>
    </div>
    <div class="goods_info">
      <div class="line2"></div>
      <div class="line3">商品详情</div>
    <div v-html="goodInfo.goods_introduce"></div>
    </div>
    <!--    有没有登录，添加到购物车操作-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span style="color: black">您需要登录，以此查看购物车！</span>
      <span slot="footer" class="dialog-footer">
    <el-button  @click="dialogVisible = false">取 消</el-button>
    <el-button style="background: rgb(255, 0, 54); color: white" @click="toLogin">去登录</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
// import VHead from '../commom/header'
import TopBar from '../commom/Topbar'
export default {
  //  全局数据
  data () {
    return {
      goodInfo: {
        is_promote: '',
        pics: {
          pics_big_url: ''
        },
        goods_introduce: ''
      },
      //  大图的索引下标
      bigImgIndex: 0,
      //  购买商品信息（商品id，单价，数量）
      buyInfo: {
        goods_id: '',
        goods_price: '',
        totalPrice: '',
        //  添加进购物车的数量
        goods_count: 0
      },
      //  是否显示请求登录对话框
      dialogVisible: false
    }
  },
  //  组件
  components: {
    TopBar
  },
  //  组件加载默认函数
  created () {
    this.getGoodsDetails()
  },
  filters: {
    finalPrice (price) {
      return '¥ ' + price.toFixed(2, 1)
    }
  //   finalAttr(name, values) {
  //     return name + '\n' + values
  // }
  },
  //  计算函数、只在数据发生改变时运行一次，减少每次加载的资源占用。
  computed: {
    // totalPrice() {
    //   if (this.buyInfo) {
    //     this.totalPrice = this.goods_price * this.goods_count
    //   }
    // }
  },
  //  方法定义区
  methods: {
    async  getGoodsDetails () {
      //  获取到路由页面传过来的商品id数据。
      const id = this.$route.query.id
      const { data: res } = await this.$http.get(`v2/goods/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品数据失败！')
      }
      this.goodInfo = res.data
      if (this.goodInfo.attrs.length > 2) {
        this.goodInfo.attrs = this.goodInfo.attrs.slice(0, 2)
      }
      console.log(this.goodInfo.attrs)
    },
    //  返回首页的路由操作
    toIndex () {
      this.$router.push('/shop_home')
    },
    //  根据小图显示大图
    changeBigImg (bigImgIndex) {
      console.log(bigImgIndex)
      this.bigImgIndex = bigImgIndex
    },
    add () {
      this.buyInfo.goods_count++
    },
    sub () {
      if (this.buyInfo.goods_count <= 0) {
        return
      }
      this.buyInfo.goods_count--
    },
    //  添加进购物车操作
    toCart () {
      // const totalPrice = this.goodInfo.goods_price * this.buyInfo.goods_count
      // this.buyInfo.goods_name = this.goodInfo.goods_name
      this.buyInfo.goods_id = this.goodInfo.goods_id
      // this.buyInfo.goods_price = this.goodInfo.goods_price
      // this.buyInfo.totalPrice = totalPrice
      // this.buyInfo.pic_url = this.goodInfo.pics[0].pics_sma_url
      // console.log(this.buyInfo)
      if (this.$store.state.user) {
        this.$router.push({
          path: '/cart',
          query: this.buyInfo
        })
      } else {
        this.dialogVisible = true
      }
    },
    //  从对话框中跳转到登录界面
    toLogin() {
      this.$router.push('shop_login')
    }
  }
}
</script>
<style lang="less" scoped>
  *{margin: 0;
    padding: 0;
    font-family: Microsoft YaHei,serif,tahoma;
    >em {
      font-style: normal;
      color: rgb(255, 0, 54);
      margin: auto;
    }
  }
  .sn{
    font-size: 14px;
    height: 32px;
    width: 100%;
    background-color: #f1f1f1;
    line-height: 32px;
    position: relative;
    >.sn-login-info{
      display: inline-block;
      >em{
        font-style: normal;
        margin: 0 10px;
        cursor: pointer;
      }
    }
    >.sn-login,.sn-register{
      margin:0 10px 0 ;
      cursor: pointer;
    }
    >.sn-quick-menu{
      position: relative;
      /*float: right;*/
      display: inline;
      clear: both;
      float: right;
      right: 50px;
      cursor: pointer;
      >li{
        clear: both;
        display: inline;
        margin: 0 10px;
        right: 10px;
        /*position:absolute;*/
      }
    }
  }
  .sn-quick-menu>li>a:hover,.sn-login:hover,.sn-register:hover{
    color: rgb(255,0,54);
  }
  .shopicon{
    width: 390px;
    height: 130px;
    /*background-color: red;*/
    position: relative;
    text-align: center;
    display: inline-block;
    margin-top: 20px;
    line-height: 130px;
    >img{
      height: 100%;
    }
  }
  .search{
    font-size: 0;
    display: inline-block;
    width: 76%;
    float: right;
    position: absolute;
    line-height: 130px;
    margin-top: 20px;
    /*background-color: cyan;*/
    /*margin: 20%;*/
  }
  .search-input{
    width: 38%;
    height: 32px;
    line-height: 36px;
    border: 2px solid rgb(255,0,54);
    outline: none;
    font-size: 16px;
    position: relative;
    top: 2px;
    padding: 2px 2px 2px 8px;
  }

  .search-button{
    line-height: 36px;
    width: 10%;
    height: 40px;
    font-size: 18px;
    color: #ffffff;
    border: 2px solid rgb(255,0,54);
    top: 3px;
    position: relative;
    background-color: rgb(255,0,54);
    outline: none;
    margin: 0;
    padding: 0;
  }
  .search-button:after{
    border: none;
  }
  .card{
    width: 400px;
    height: 36px;
    /*background: #ff0000;*/
    position: relative;
    left: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: normal;
    flex-wrap: wrap;
    >.card1,.index{
      width: 240px;
      height: 36px;
      line-height: 36px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      background: #000;
    }
    >.index{
      font-weight: bold;
      width: 120px;
      color: #000000;
      background-color: #fff;
    }
    >.index:hover{
      cursor: pointer;
      color: rgb(255,0,54);
    }
  }
  .index{
    /*display: inline;*/
    position: relative;
    float: left;
  }
  .line{
    width: 100%;
    border: 1px solid rgb(255,0,54);
    margin-bottom: 27px;
  }
  .goods{
    display: flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items: normal;
    flex-wrap: wrap;
    width:70%;
    height: 460px;
    /*background: #000;*/
    left: 7%;
    position: relative;
    border-right:1px dashed black;
    >.img{
      width: 360px;
      height: 100%;
      /*background: #000;*/
      /*border: 2px solid rgb(255,0,54);*/
      left: 6%;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-evenly;
      >.img_big{
        width: 100%;
        height: 80%;
        border: 2px solid rgb(255,0,54);
        display: flex;
        align-items: center;
        >img{
          width: 100%;
          height: 90%;
        }
      }
      .img_small{
        width: 100%;
        height: 16%;
          >.img_box:hover{
            border: 2px solid black;
            z-index: 9999;
            opacity: 1;
          }
          > .img_small_index {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            flex-wrap: wrap;
            overflow: hidden;

            > img {
              width: 60px;
              height: 60px;
            }

            > img:hover {
              /*border: 1px solid gainsboro;*/
            }
        }
      }
    }
    >.choice{
      width: 50%;
      height: 100%;
      /*background-color: aqua;*/
      display: flex;
      flex-direction: column;
      align-items: normal;
      flex-wrap: wrap;
     >.name{
       text-align: center;
       width: 100%;
       height: 51px;
       font-weight: 700;
       line-height: 51px;
       background-color: #fff;
       overflow: hidden;
     }
      >.price,.weight{
        color: gainsboro;
        height: 41px;
        line-height: 41px;
        /*background-color:orange;*/
        >span{
          display: inline-block;
          position: relative;
          left: 50px;
          color: rgb(255,0,54);
          font-size: 26px;
          line-height: 41px;
          text-align: center;
        }
      }
      .weight{
        font-size: 16px;
        color: gainsboro;
        margin-top: 5px ;
        border-bottom: 1px dashed gainsboro;
        >span{
          color: black;
          font-size: 16px;
        }
        >.span3{
          color:gainsboro;
          position: relative;
          margin-left:8px ;
        }
      }
      .attr{
        height: 36px;
        line-height: 36px;
        border-bottom: 1px dashed gainsboro;
        >.attr_name{
          color: gainsboro;
        }
        >.attr_vals{
          margin-left: 10px;
        }
      }
    .count{
      margin-top: 5px ;
      color: gainsboro;
      height: 90px;
      line-height: 80px;
      /*background: orange;*/
      display: flex;
      /*justify-content: space-evenly;*/
      >.counter {
        display: flex;
        flex-direction: row;
        /*justify-content: normal;*/
        align-items: normal;
        flex-wrap:wrap;
        width: 120px;
        height: 82px;
        justify-content: space-evenly;
        > label > input {
          width: 43px;
          height: 31px;
          padding-left: 5px;
          line-height: 80px;
          border: 1px solid #000000;
          outline: none;
          font-size: 17px;
          left: 50px;
        }
        >.btn{
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          >.notable{
           cursor: not-allowed;
          }
           > button {
             height: 20px;
             width: 20px;
             margin-bottom: 3px;
             outline: none;
             border-radius: 0;
             border: 1px solid black;
           }
        }
      }
    }
      >.sub_button{
        .notable{
          cursor: not-allowed;
        }
        >button{
          width: 180px;
          height: 40px;
          border: none;
          outline: none;
          background: rgb(255,0,54);
          color: white;
          font-size: 18px;
          position: relative;
          left: 80px;
        }
      }
      >.tran_info{
        margin-top: 30px;
        color: gainsboro;
        >span{
          font-size: 14px;
          position: relative;
          /*left: 50px;*/
          color: #A1887B;
        }
      }
    }
  }
  .goods_info{
    width: 60%;
    height: 200px;
    /*background: #000;*/
    /*left: 6%;*/
    position: relative;
    margin: 30px 15%;
    >.line2{
      border: 0.5px solid gainsboro;
    }
    >.line3{
      width: 90px;
      height: 48px;
      line-height: 48px;
      border-top-color:rgb(255,0,54)!important;
      border-top-width: 3px!important;
      border: 1px solid gainsboro;
      text-align: center;
      position: relative;
      top: -2px;
      color: rgb(255,0,54);
      /*background-color: #000;*/
    }
  }
</style>
